<!-- 文件列表表格布局 license by http://eleadmin.com -->
<template>
  <div class="ele-file-list-table">
    <!-- 表头 -->
    <div :class="headerClass">
      <div class="ele-file-list-table-item-body">
        <!-- 复选框 -->
        <div v-if="checkbox" class="ele-file-list-table-item-check-group">
          <i :class="checkboxClass" @click.stop="checkAllChange"></i>
        </div>
        <!-- 文件名 -->
        <div class="ele-file-list-table-item-name" @click="sortChange('name')">
          <div v-if="total" @click.stop="checkAllChange">
            {{ totalText.replace(/{total}/g, String(total)) }}
          </div>
          <template v-else>
            <div>{{ nameText }}</div>
            <ele-file-sort
              v-if="allowSort"
              :sort="sort"
              :order="order"
              name="name"
            />
          </template>
        </div>
        <!-- 大小 -->
        <div
          class="ele-file-list-table-item-size"
          @click="sortChange('length')"
        >
          <div>{{ sizeText }}</div>
          <ele-file-sort
            v-if="allowSort"
            :sort="sort"
            :order="order"
            name="length"
          />
        </div>
        <div
          class="ele-file-list-table-item-time"
          @click="sortChange('updateTime')"
        >
          <div>{{ timeText }}</div>
          <ele-file-sort
            v-if="allowSort"
            :sort="sort"
            :order="order"
            name="updateTime"
          />
        </div>
      </div>
    </div>
    <!-- item -->
    <ele-file-table-item
      v-for="(item, index) in data"
      :key="index"
      :item="item"
      :icons="icons"
      :checkbox="checkbox"
      :selection="selection"
      @item-click="itemClick"
      @item-check-change="itemCheckChange"
    >
      <template #tool="{ item }">
        <slot name="tool" :item="item" />
      </template>
    </ele-file-table-item>
  </div>
</template>

<script>
  import EleFileSort from './ele-file-sort.vue';
  import EleFileTableItem from './ele-file-table-item.vue';

  export default {
    name: 'EleFileTable',
    components: {
      EleFileSort,
      EleFileTableItem
    },
    emits: [
      'sort-change',
      'check-all-change',
      'item-click',
      'item-check-change'
    ],
    props: {
      // 文件数据
      data: {
        type: Array,
        required: true
      },
      // 后缀对应的图标
      icons: {
        type: Array,
        required: true
      },
      // 选中数据
      selection: Array,
      // 是否显示复选框
      checkbox: Boolean,
      // 是否是全选
      checked: Boolean,
      // 是否是半选
      indeterminate: Boolean,
      // 选中的数量
      total: Number,
      // 选中数量文字
      totalText: {
        type: String,
        required: true
      },
      // 全选按钮文字
      checkAllText: String,
      // 文件名文字
      nameText: String,
      // 文件大小文字
      sizeText: String,
      // 修改时间文字
      timeText: String,
      // 排序字段
      sort: {
        type: [String, Boolean],
        default: false
      },
      // 排序方式
      order: String
    },
    data() {
      return {
        // 头部复选框class
        checkboxClass: [
          'ele-file-list-table-item-check',
          'ele-file-icon-check',
          'ele-bg-primary'
        ].join(' ')
      };
    },
    computed: {
      // 是否开启排序
      allowSort() {
        return typeof this.sort === 'string';
      },
      // 头部class
      headerClass() {
        return [
          'ele-file-list-table-item ele-file-list-table-item-header',
          { checked: this.checked }
        ];
      }
    },
    methods: {
      /* 排序点击事件 */
      sortChange(sort) {
        this.$emit('sort-change', sort);
      },
      /* 全选框点击事件 */
      checkAllChange() {
        this.$emit('check-all-change', !this.checked);
      },
      /* item点击事件 */
      itemClick(item) {
        this.$emit('item-click', item);
      },
      /* item复选框点击事件 */
      itemCheckChange(item) {
        this.$emit('item-check-change', item);
      }
    }
  };
</script>

<style lang="scss">
  // 文件列表表格布局
  .ele-file-list-table {
    position: relative;

    // item
    .ele-file-list-table-item {
      line-height: 44px;
      position: relative;

      // body
      .ele-file-list-table-item-body {
        display: flex;
        align-items: center;
        border-top: 1px solid hsla(0, 0%, 60%, 0.15);
        position: relative;
        z-index: 1;
      }

      &:last-child .ele-file-list-table-item-body {
        border-bottom: 1px solid hsla(0, 0%, 60%, 0.15);
      }

      &:first-child .ele-file-list-table-item-body {
        border-top: none;
      }

      // 列宽设置
      .ele-file-list-table-item-check-group {
        width: 45px;
        padding-left: 16px;
        box-sizing: border-box;
        flex-shrink: 0;
      }

      .ele-file-list-table-item-name {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
      }

      .ele-file-list-table-item-size {
        width: 120px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }

      .ele-file-list-table-item-time {
        width: 180px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }

      // 复选框
      .ele-file-list-table-item-check {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        display: inline-block;
        vertical-align: -3px;
        cursor: pointer;

        &:before {
          left: 3px;
          top: 4px;
          width: 8px;
          height: 4px;
        }
      }

      &:not(.checked) .ele-file-list-table-item-check {
        background-color: transparent !important;
        border: 1px solid hsla(0, 0%, 60%, 0.3);

        &:before {
          display: none;
        }
      }
    }

    // header
    .ele-file-list-table-item-header {
      line-height: 36px;
      cursor: pointer;
    }
  }

  /* 小屏幕样式 */
  @media screen and (max-width: 768px) {
    .ele-file-list-table .ele-file-list-table-item {
      .ele-file-list-table-item-size,
      .ele-file-list-table-item-time {
        display: none;
      }

      .ele-file-list-table-item-tool-group {
        padding-right: 0;
      }
    }
  }
</style>
